import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

const tabs = [
  { title: <Badge>省</Badge> },
  { title: <Badge>市</Badge> },
  { title: <Badge>区</Badge> },
  { title: <Badge>街道</Badge> },
];

const tabs2 = [
  { title: 'First Tab', sub: '1' },
  { title: 'Second Tab', sub: '2' },
  { title: 'Third Tab', sub: '3' },
  { title: 'Third Tab', sub: '4' },
];

const TabExample = () => (
  <div>
    <Tabs tabs={tabs}
      initialPage={0}
      onChange={(tab, index) => { console.log('onChange', index, tab); }}
      onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>广东</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>湖北</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff' }}>江西</button>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>深圳</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>武汉</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff' }}>南昌</button>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>宝安</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>汉南</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff' }}>东湖</button>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>草围</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff', marginRight: '.3rem' }}>纱帽</button>
        <button style={{ fontSize: '20px', width: '1rem', border: '1px solid black', backgroundColor: '#fff' }}>八一桥</button>
      </div>
    </Tabs>
    <WhiteSpace />
    
  </div>
);

// ReactDOM.render(<TabExample />, mountNode);
export default TabExample;